<template>
  <div class="app-container Index">
    <div class="top-box">
      <!-- 快速筛选 -->
      <div class="select">
        <comSelect :options="comSelectOptions"></comSelect>
      </div>
      <!-- 查询 -->
      <div class="form">
        <comForm
          :list="comFormList"
          @EventOnsubmit="onSubmit"
          @EventReset="resetFn"
        ></comForm>
      </div>
      <!-- 批量操作 -->
      <div class="btn-box">
        <!-- <span class="title">批量操作</span>
        <el-button type="primary" plain size="mini" icon="el-icon-check"
          >批量通过</el-button
        > -->
        <!-- 按钮组 -->
        <comMb8Button
          :config="comMb8ButtonConfig_btnBox"
          @handle="clickBtnGroup_btnBox"
        ></comMb8Button>
      </div>
    </div>

    <comTable
      :list="comTableList"
      :modes="comTableMode"
      :pagination="comTablePagination"
      :config="comTableConfig"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <el-table-column
        :width="'210px'"
        class="operate"
        align="left"
        label="操作"
      >
        <!-- 按钮组 -->
        <!-- <template #default="{ row }">
      
          <comMb8Button :config="comMb8ButtonConfig_Table"
                        @handle="clickBtnGroup_Table(arguments, row)"></comMb8Button>
        </template> -->

        <template slot-scope="scope">
          <el-button
            size="mini"
            plain
            type="primary"
            :disabled="scope.row.status == '已完成'"
            @click="clickBtnGroup_Table('confirm', scope.row)"
            v-hasPermi="['financial:wage:updateStatus']"
            >确认</el-button
          >
          <el-button
            size="mini"
            plain
            type="danger"
            :disabled="scope.row.status == '已完成'"
            @click="clickBtnGroup_Table('error', scope.row)"
            v-hasPermi="['system:user:remove']"
            >报错</el-button
          >
          <el-button
            size="mini"
            plain
            @click="clickBtnGroup_Table('info', scope.row)"
            v-hasPermi="['financial:wageInfo:list']"
            >明细</el-button
          >
        </template>
      </el-table-column>
    </comTable>
  </div>
</template>

<script>
import comTable from "@/wss/components/comTable.vue";
import comSelect from "@/wss/components/comSelect.vue";
import comForm from "@/wss/components/comForm.vue";
import comMb8Button from "@/wss/components/comMb8Button.vue";

import {
  getWageList,
  updateWageInfoStatus_ById,
} from "@/wss/api/financial/Accounting/wage";

export default {
  name: "Index",
  components: {
    comTable,
    comSelect,
    comForm,
    comMb8Button,
  },

  data() {
    return {
      //------快速筛选------//
      comSelectOptions: {
        value: "",
        title: "快速筛选",
        list: [
          {
            value: "",
            label: "所有状态",
          },
          {
            value: "1",
            label: "待审核",
          },
          {
            value: "2",
            label: "被驳回",
          },
          {
            value: "0",
            label: "已完成",
          },
        ],
      },
      //------From--------//
      comFormList: {
        modes: [
          {
            placeholder: "请输入员工姓名",
            formType: "input",
            label: "姓名",
            mode: "ename",
            value: "",
          },
          {
            placeholder: "请选择角色",
            formType: "select",
            label: "角色",
            value: "",
            mode: "postion",
            select: [
              {
                label: "全部",
                value: "",
              },
              {
                label: "专家",
                value: "专家",
              },
              {
                label: "运营",
                value: "运营",
              },
              {
                label: "客服",
                value: "客服",
              },
              {
                label: "财务",
                value: "财务",
              },
            ],
          },
          {
            placeholder: "请选择业绩",
            formType: "select",
            label: "业绩",
            value: "0",
            mode: "commision",
            select: [
              {
                label: "全部",
                value: "0",
              },
              {
                label: "1万以内",
                value: "1",
              },
              {
                label: "1万以上 - 5万以内",
                value: "2",
              },
              {
                label: "5万以上 - 10万以内",
                value: "3",
              },
              {
                label: "10万以上",
                value: "4",
              },
            ],
          },
          {
            placeholder: "请选择工资",
            formType: "select",
            label: "工资",
            value: "0",
            mode: "wage",
            select: [
              {
                label: "全部",
                value: "0",
              },
              {
                label: "5千以内",
                value: "1",
              },
              {
                label: "5千以上 - 1万以内",
                value: "2",
              },
              {
                label: "1万以上 - 2万以内",
                value: "3",
              },
              {
                label: "2万以上",
                value: "4",
              },
            ],
          },
          /* {
            placeholder: "",
            formType: "datePicker",
            label: "筛选时间",
            pickerType: "monthrange",
            rangeSeparator: "～",
            startPlaceholder: "开始月份",
            endPlaceholder: "结束月份",
          }, */
        ],
      },
      //------Table--------//
      comTableMode: [
        {
          type: "selection", //多选列
          width: "50%",
          align: "center",
        },
        {
          label: "工号",
          mode: "employeeIdStr",
          align: "center",
        },
        {
          label: "姓名",
          mode: "ename",
          align: "center",
        },
        {
          label: "角色",
          mode: "postion",
          align: "center",
        },
        {
          label: "状态",
          mode: "status",
          align: "center",
          isSwitch: false,
          width: "70%",
        },
        {
          label: "底薪（元）",
          mode: "basicSalary",
          align: "center",
        },
        {
          label: "绩效（元）",
          mode: "commision",
          align: "center",
        },
        {
          label: "应发工资（元）",
          mode: "wage",
          align: "center",
        },
      ],
      comTableList: [],
      comTablePagination: {
        pageNum: 1, //第几页
        total: 0, // 总数
        pageSize: 10, //每页显示数
      },
      comTableConfig: {
        loading: false,
      },
      //------- Button -------//
      comMb8ButtonConfig_btnBox: [
        {
          label: "批量确认",
          type: "primary",
          icon: "el-icon-check",
          clickBtn: "",
          vHasPermi: "",
          btnId: "confirm",
        },
        /* {
          label: "批量驳回",
          type: "",
          icon: "el-icon-close",
          clickBtn: "",
          vHasPermi: "",
          btnId: "reject",
        }, */
      ],
      comMb8ButtonConfig_Table: [
        {
          label: "确认",
          type: "primary",
          icon: "",
          vHasPermi: "",
          disabled: false,
          btnId: "confirm",
        },
        {
          label: "报错",
          type: "danger",
          icon: "",
          vHasPermi: "",
          disabled: false,
          btnId: "error",
        },
        {
          label: "明细",
          type: "",
          icon: "",
          vHasPermi: "",
          disabled: false,
          btnId: "info",
        },
      ],
      //------- 查询条件数组 -------//
    };
  },
  computed: {},
  mounted() {
    this.getWageList(this.comTablePagination);
  },

  methods: {
    /* 前段逻辑 */
    //------- 分页 -------//
    // pageSize 改变时会触发	每页条数
    handleSizeChange(val) {
      this.comTablePagination.pageSize = val;
      this.getWageList(this.comTablePagination);
    },
    // currentPage 改变时会触发	当前页
    handleCurrentChange(val) {
      this.comTablePagination.pageNum = val;
      this.getWageList(this.comTablePagination);
    },

    //------- form -------//
    //获取提交的数据
    onSubmit(arr) {
      console.log("onSubmit: ", arr, this.comSelectOptions.value);
      arr.forEach((item) => {
        for (const key in item) {
          this.comTablePagination[key] = item[key];
        }
      });
      this.comTablePagination["status"] = this.comSelectOptions["value"];
      this.comTablePagination["pageNum"] = 1;
      this.getWageList(this.comTablePagination);
    },
    //重置form事件
    resetFn() {
      this.comSelectOptions.value = "";
    },

    //------- 按钮组 -------//
    //顶部按钮组
    clickBtnGroup_btnBox(btnType, btnId) {
      console.log(btnType, btnId);
    },
    //表格操作栏按钮组 g
    clickBtnGroup_Table(g, row) {
      if (g == "confirm") {
        /* 确认 */
        this.$confirm("是否确认?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let updataData = [{ id: row.idStr, status: "0" }];
            this.updateWageInfoStatus_ById(updataData);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "操作取消",
            });
          });
      } else if (g[1] == "info") {
        /* 明细 */
        let data = {
          id: row.idStr,
          employeeId: row.employeeIdStr,
          eName: row.ename,
          status: row.status,
        };
        this.$router.push({
          path: "/fnancialPlatform/accountingManagemen/salaryDetails",
          query: { data: JSON.stringify(data) },
        });
      }
    },

    /* 获取后端数据 */
    //------- 获取 工资提成 列表 -------//
    async getWageList(data) {
      this.comTableConfig.loading = true;
      let result = await getWageList(data).then((res) => res);
      console.log(result, "返回的数据");
      if (result.code == "200") {
        this.comTableList = result.rows;
        //修饰状态码
        this.comTableList.forEach((item) => {
          if (item.status == "0") {
            item.status = "已完成";
          }
          if (item.status == "1") {
            item.status = "待审核";
          }
          if (item.status == "2") {
            item.status = "被驳回";
          }
        });
        this.comTablePagination.total = result.total;
        this.comTableConfig.loading = false;
      }
    },
    //------- 修改 工资提成 状态修改 -------//
    async updateWageInfoStatus_ById(data) {
      this.comTableConfig.loading = true;
      console.log(data);
      let result = await updateWageInfoStatus_ById(data).then((res) => res);
      console.log(result);
      if (result.code == "200") {
        this.getWageList(this.comTablePagination);
        this.$message({
          type: "success",
          message: "操作成功",
        });
      } else {
        this.$message({
          type: "info",
          message: result,
        });
        this.comTableConfig.loading = false;
      }
      this.comTableConfig.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.Index {
  .top-box {
    .select {
      padding-bottom: 10px;
    }
    .form {
      padding-top: 10px;
    }
    .btn-box {
      display: inline-block;
      padding-bottom: 10px;
    }
  }
  ::v-deep .mb8 {
    //样式穿透
    margin-bottom: 0px;
  }
}
</style>